<template>
  <span
    ref="icon"
    class="status-icon-box"
  >
    <StatusColorSVG
      v-if="colors"
      :colors="colors"
      style="width: 16px; height: 16px; vertical-align: middle"
    ></StatusColorSVG>
    <img
      v-else
      :src="nodeData.icon"
      alt=""
    />
  </span>
  <div class="box-placeholder"></div>
  <InstanceSpecification v-bind="props"></InstanceSpecification>
</template>
<script lang="ts">
export default {
  inheritAttrs: false
};
</script>
<script lang="ts" setup>
import { NodeData } from "@/modules/model/project/IGraphNode";
import { computed } from "vue";
import { StatusColorSVG } from "@/mdesign-lib/mdesign-graph.umd.js";
import InstanceSpecification from "./InstanceSpecification.vue";

const props = defineProps<{
  nodeData: NodeData;
  selected: boolean;
  disabled: boolean;
}>();

const colors = computed(() => {
  const projectStatus = props.nodeData.showAttribute?.extraAttribute?.projectStatus;
  const hasColor = projectStatus ? projectStatus.some(property => property.alpha !== undefined) : false;
  const result = hasColor
    ? projectStatus?.map(property => ({
        r: property.r || 0,
        g: property.g || 0,
        b: property.b || 0,
        a: property.alpha || 0,
        value: property.propertyId
      }))
    : null;
  return result;
});
</script>
<style lang="scss">
.status-icon-box {
  position: absolute;
  top: 50%;
  left: -3px;
  background-color: #fff;
  transform: translateY(-50%);
}
.box-placeholder {
  width: 14px;
  height: 16px;
  line-height: 16px;
  margin-right: 2px;
  background-color: #fff;
  display: inline-block;
  vertical-align: middle;
}
</style>
